<html>
 <head>
  <script type="text/javascript" src="_lib/jquery.js"></script>
  <script type="text/javascript" src="_lib/jquery.cookie.js"></script>
  <script type="text/javascript" src="_lib/jquery.hotkeys.js"></script>
  <script type="text/javascript" src="jquery.jstree.js"></script>
  <script type="text/javascript" src="print_r.js"></script>
  <style type="text/css">
    .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
    .demo { width: 50%; float: left }
  </style>

 </head>
 <body>
  <div class="demo">
   <h2>Step 1: Select tree point to plot</h2>
   <div id="new_tree"></div>
   <div id="plot_select">
     <h2>Step 2: Select sub-points</h2>
     <input type="button" id="show_plotopts" value="Select">
   </div>
  </div>
  <script type="text/javascript">
var type_data = {
      "container" : {
        "valid_children" : "all",
      },
      "subscription" : {
        "valid_children" : [ "point" ],
      },
      "stream" : {
        "valid_children" : "none",
      },
      "point" : {
        "valid_children" : [ "stream" ]
      }
    };
var tree_id = 2;

$(function() {
 $("#new_tree")
 .jstree({
  "plugins" : [ "json_data", "themes", "crrm", "ui", "types" ],
  "crrm" : { "move" : { 
    "always_copy" : "multitree",
    "open_onmove" : false,
     }
    },
  "json_data" : {
    "progressive_render" : true,
     "ajax" : {
       "url" : "/smap/tree/2",
       }
  },
  "types" : {
    "types" : type_data,
    },
   "core" : {
     "animation" : 100,
   }
  });
 })
 .bind("mouseup.jstree", function (e, data) {
   var sel = $("#new_tree").jstree("get_selected");
   alert(sel + sel.length);

 })
;

  </script>
 </body>
</html>
